<template>
  <div>
    <el-form :model="model" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="库位编码" prop="LocationNumber">
            <el-input v-model="model.LocationNumber"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="库位名称" prop="LocationName">
            <el-input v-model="model.LocationName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属仓库" prop="WarehouseName">
            <el-select v-model="model.WarehouseName" placeholder="请选择所属仓库">
              <el-option v-for="item in WarehouseList" :key="item.Id" :label="item.WarehouseName" :value="item.WarehouseName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="所属库区" prop="AreaName">
            <el-select v-model="model.AreaName" placeholder="请选择所属库区">
              <el-option v-for="item in WmWarehouseAreaList" :key="item.Id" :label="item.AreaName" :value="item.AreaName"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row>
        <el-col :span="12">
          <el-form-item label="位置" prop="Location">
            <el-input v-model="model.Location"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="面积" prop="Area">
            <el-input v-model="model.Area"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="负责人" prop="Charge">
            <el-input v-model="model.Charge"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="备注" prop="Remark">
            <el-input v-model="model.Remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      
      <div style="text-align:right; margin: 10px;">
        <el-button type="primary" @click="submitForm">{{ isUpdate?'立即保存':'立即创建' }}</el-button>
        <el-button @click="resetForm">重置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    model: {
      require: true,
      type: Object,
    },
    isUpdate: {
      equire: true,
      type: Boolean
    }
  },
  data(){
    return{
      rules:{
        LocationNumber : { required: true, message: '请输入库拉编码', trigger: 'blur' },
        LocationName : { required: true, message: '请输入库拉名称', trigger: 'blur' },
        WarehouseName : { required: true, message: '请输入所属仓库', trigger: 'blur' },
        AreaName : { required: true, message: '所属库区', trigger: 'blur' },
        Location : { required: true, message: '请输入位置', trigger: 'blur' },
        Area : { required: true, message: '请输入面积', trigger: 'blur' },
        Charge : { required: true, message: '请输入负责人', trigger: 'blur' },
      },
      WarehouseList:[],
      WmWarehouseAreaList:[],
    }
  },
  created(){
    this.getWarehouseData ();
    this.getWmWarehouseAreaDate();
  },
  methods:{
    submitForm(){
      this.$refs['ruleForm'].validate((valid) => {
        if(valid){
          if(this.isUpdate){
            this.put();
          }
          else{
            this.add();
          }
        }else{
          this.showNotify('请输入必填项');
          return false;
        }
      });
    },
    resetForm(){
        this.$refs['ruleForm'].resetFields();
    },
    //修改
    put(){
		  this.$http.putForm('/api/WmWarehouseLocation',{model:this.model},{loading:this.$loading()})
      .then(res=>{
        this.$emit('callback');
      })
    },
    add(){
      this.$http.postForm('/api/WmWarehouseLocation',{model:this.model},{loading:this.$loading()})
		  .then((res)=>{
        this.$emit('callback');
        this.showNotify('修改成功');

		  })
    },
    getWarehouseData(){
      this.$http.get('/api/Warehouse/GetAll')
      .then(res=>{
        this.WarehouseList=res.Data;
      })
    },
    getWmWarehouseAreaDate(){
      this.$http.get('/api/WmWarehouseArea/GetAll')
      .then(res=>{
        this.WmWarehouseAreaList=res.Data;
      })
    }
  }
}
</script>

<style>

</style>